Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

Instructions for Expandable/Collapsible Menu System [ECMS]

  1. Loading the javascript files
  2. Creating a menu
  3. Customising the menu
  4. Using multiple menus
  5. Controlling the menu
    1. Expanding a menu
    2. Collapsing a menu
  6. Troubleshooting

Expanding a menu

You can call the ECMS_expand(name) function at any time to expand a menu. Simply put the name of the menu you wish to open. Note that parent menu items must be opened first. That is, if you wish to open a menu called Help which is a submenu of About, then you must open About first like so: ECMS_expand('About'); ECMS_expand('Help');.

ECMS_expand is commonly used in the <body onload=""> event handler, to expand menu items specific to the current page. From the above example, if you wanted the Help section to be open by default on the current page you would use: <body onload="ECMS_expand('About'); ECMS_expand('Help');">

If you use multiple menus on a single page, then you must specify which menu with a second parameter. This is done using a number which corresponds to the menu. Menus are numbered in the order they appear in the HTML source code from 0, 1, 2, 3, ..., N. ECMS_expand('About', 0); ECMS_expand('Help', 2); will open About in the first menu on the page, and Help from the 3rd menu.

Collapsing a menu

You can call the ECMS_collapse(name) function at any time to collapse a menu. Simply put the name of the menu you wish to open. Note that parent menu items must be opened first. That is, if you wish to open a menu called Help which is a submenu of About, then you must open About first like so: ECMS_expand('About'); ECMS_expand('Help');.

If you use multiple menus on a single page, then you must specify which menu with a second parameter. See the instructions for expanding a menu above.

Further Instructions

  1. Loading the javascript files
  2. Creating a menu
  3. Customising the menu
  4. Using multiple menus
  5. Controlling the menu
  6. Troubleshooting
[ inspire logo ]
Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.
Fork me on GitHub